<template>
  <view class="shopInfo">
    <view class="shopImg">
      <image :src="storeImg" mode="aspectFill"></image>
    </view>
    <view class="marker-layout">
      <view class="marker-detail">
        <view class="marker-detail-name">
          <view class="shopName">{{shopName}}</view>
        </view>
        <view class="marker-detail-time">
          <image src="@/static/images/time.png" mode=""></image> <text>{{workTime}}</text>
        </view>
        <view class="marker-detail-location">
          <image src="@/static/images/locatedIcon.png" mode=""></image> <text>{{address}}</text>
        </view>
      </view>
      <view class="powerBankEnabled" @click="markerInfoClick">
        <van-row>
          <van-col span="5">
            <view class="enabled">
              <image src="@/static/images/powerbook.png" mode=""></image> <text>可用</text>
            </view>
          </van-col>
          <van-col class="disabled" span="16">
            <text>不可还（卡槽已满）</text>
          </van-col>
        </van-row>
      </view>
      <view class="pownerBanNotice">
        <text>
          计费：3分钟内归还免费，2元/30分钟，28元/24小时，总封顶99元
        </text>
      </view>
      <view class="powerBtn">
        <!-- <van-row gutter="15">
          <van-col span="12">
            
          </van-col>
          <van-col span="12">
            
          </van-col>
        </van-row> -->
        <van-button plain type="primary" color="#105BDE" @click="scanCode">扫码充电</van-button>
        <van-button @click="gotoThere" color="linear-gradient(#0366E0, #1E50DC)" type="info">导航去这里
          {{this.getDistance(distance)}}
        </van-button>
      </view>
      <view class="question-end">
        <text @click="uptoNextShop" class="shop">附近门店</text> | <text @click="feedBackQuetsion"
          class="questions">遇到了问题？</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        distance: '',
        locationInfo: {},
        shopName: '',
        workTime: '',
        address: '',
        storeImg: ''
      }
    },
    onLoad(e) {
      this.distance = e.distance || '?'
      this.locationInfo = JSON.parse(e.locationInfo) || {}
      if (this.locationInfo && Object.keys(this.locationInfo).length > 0) {
        this.getShopInfo()
      }
    },
    methods: {
      getDistance(distance) {
        if (distance >= 1000) {
          return (distance / 1000).toFixed(1) + 'km';
        } else {
          return distance + 'm';
        }
      },
      getShopInfo() {
        const env = process.env.NODE_ENV === 'production' ? require('@/utils/prod.env') : require('@/utils/dev.env')
        const {
          address,
          titles,
          storeName,
          storeStartTime,
          storeEndTime,
          storeDetailAddress,
          storeImg
        } = this.locationInfo
        this.shopName = titles || storeName
        this.address = address || storeDetailAddress
        this.workTime = `${storeStartTime} - ${storeEndTime}`
        this.storeImg = `${env.API_BASE_URL}${storeImg}`
      },
      uptoNextShop() {
        uni.navigateTo({
          url: '/subpkg/nextShop/index'
        })
      },
      feedBackQuetsion() {
        const shopInfo = {
          shopName: this.shopName,
          address: this.address,
          workTime: this.workTime,
          id: this.locationInfo.id
        }
        uni.navigateTo({
          url: `/subpkg/feedback/index?shopInfo=${JSON.stringify(shopInfo)}`
        })
      },
      scanCode() {
        uni.scanCode({
          success: (res) => {
            console.log(res)
          }
        })
      },
      gotoThere() {
        // console.log('locationInfo', this.locationInfo);
        const {
          address,
          titles,
          storeName,
          storeDetailAddress,
          storeLatitude,
          storeLongitude,
          latitude,
          longitude
        } = this.locationInfo
        uni.openLocation({
          latitude: latitude || storeLatitude,
          longitude: longitude || storeLongitude,
          name: titles || storeName,
          address: address || storeDetailAddress
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .shopInfo {
    .shopImg {
      width: 100%;
      height: 375px;
      background-color: #ccc;

      image {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .marker-layout {
      position: relative;
      top: -20px;
      padding: 18px 0;
      background-color: #fff;
      border-radius: 12px;

      .marker-detail {
        margin: 0 15px;
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;

        .marker-detail-name {
          margin-left: 12px;
          display: flex;
          padding-bottom: 15px;

          .shopName {
            font-weight: 700;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
          }

          .question {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 12px;
            color: #105BDE;
            flex: 0.4;

            image {
              width: 14px;
              height: 14px;
              object-fit: contain;
              margin-top: 2px;
              margin-right: 5px;
            }
          }
        }

        .marker-detail-time,
        .marker-detail-location {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #555555;
          margin-left: 12px;
          padding-bottom: 15px;

          &:last-child {
            padding-bottom: unset;
          }

          image {
            width: 14px;
            height: 14px;
            object-fit: contain;
          }

          text {
            margin-left: 5px;
          }
        }
      }

      .powerBankEnabled {
        margin: 33rpx 25rpx 26rpx 35rpx;
        height: 72rpx;
        background-color: #f8f8f8;
        padding-left: 23rpx;
        box-sizing: border-box;
        line-height: 72rpx;

        .enabled {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #105BDE;

          image {
            width: 13px;
            height: 17px;
            object-fit: contain;
          }

          text {
            margin-left: 8px;
          }
        }

        .disabled {
          font-size: 14px;
          color: #EA6436;
        }
      }

      .pownerBanNotice {
        padding: 0 20px;
        line-height: 20px;
        color: #979797;
        font-size: 14px;
        font-family: 'PingFang-SC-Regular', sans-serif;
      }

      .powerBtn {
        display: flex;
        justify-content: space-between;
        margin: 60rpx 25rpx 50rpx 35rpx;

        ::v-deep .van-button--primary {
          flex: 1;
          border-radius: 10px;
        }

        ::v-deep .van-button--normal {
          border-radius: 10px;
        }

        ::v-deep .van-button {
          width: 330rpx;
          height: 88rpx;
          font-size: 28rpx;
        }
      }

      .question-end {
        display: flex;
        justify-content: center;
        padding-left: 28px;
        color: #8E8E8E;
        font-size: 12px;

        .shop {
          margin-right: 10px;
        }

        .questions {
          margin-left: 10px;
        }
      }
    }
  }
</style>
